<script setup lang="ts">
import { useAppStoreHook } from "@/store";
const useAppStore = useAppStoreHook();
import { Plus } from "@element-plus/icons-vue";
import IconFloder from "@/components/icons/IconFloder.vue";
interface Props {
  unShowBtnLists: any;
}
const props = withDefaults(defineProps<Props>(), {
  unShowBtnLists: ["下载", "分享", "删除", "重命名", "移动到"],
});
const uploadInputRef: any = ref(null);
const BtnLists = ref([
  "下载",
  "分享",
  "删除",
  "重命名",
  // , "移动到"
]);
const upload_btns = ref([
  { type: "primary", icon: Plus, name: "上传文件" },
  { type: "", icon: IconFloder, name: "新建文件夹" },
]);
const emit = defineEmits(["btnMethods"]);
const rightBtnshow = computed(() => {
  let sum = 0;
  for (let i = 0; i <= BtnLists.value.length; i++) {
    if (props.unShowBtnLists.includes(BtnLists.value[i])) {
      sum++;
    } else continue;
  }
  return sum == BtnLists.value.length ? false : true;
});
const handleChange = (e: any) => {
  let tar: any = e.target;
  const file: any = (e.target as HTMLInputElement).files;

  // console.log("e", file, tar, dom.target);

  useAppStore.update_files([...file]);
  useAppStore.toggle_isOpen_uploadList(true);
  tar.value = "";
};
</script>

<template>
  <div class="group-btns">
    <div class="left-upload-btns">
      <el-button
        type="primary"
        :icon="Plus"
        v-if="!unShowBtnLists.includes('上传文件')"
        @click="
          () => {
            uploadInputRef.click();
            emit('btnMethods', '上传文件');
          }
        "
        >上传文件</el-button
      >
      <!-- <el-button
        v-if="!unShowBtnLists.includes('新建文件夹')"
        @click="emit('btnMethods', '新建文件夹')"
      >
        <IconFloder />
        新建文件夹
      </el-button> -->
      <input
        ref="uploadInputRef"
        type="file"
        hidden
        @change="handleChange"
        id="uploadInput"
        multiple
      />
    </div>
    <div class="share-group-btns">
      <ul v-if="rightBtnshow">
        <li
          v-for="(item, index) in BtnLists"
          :key="index"
          v-show="!unShowBtnLists.includes(item)"
          @click="emit('btnMethods', item)"
          :style="{
            borderLeft: index > 0 ? '1px solid var(--el-border-color)' : '',
          }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.group-btns {
  display: flex;
  font-weight: bold;
  height: px2rem(40px);
  max-height: px2rem(40px);
  white-space: nowrap;
  .share-group-btns {
    margin-left: auto;
    > ul {
      display: flex;
      align-items: center;
      border: 1px solid var(--el-border-color);
      border-radius: px2rem(6px);
      > li {
        padding: px2rem(6px) px2rem(8px);
        cursor: pointer;
      }
    }
  }
}
</style>
